<template>
  <div class="frist">
    <div class="frist_head">
      <div class="frist_head_top">
        <div>
          <button type="button" @click="login()">登录</button>
        </div>
        <van-search v-model="value" placeholder="股票/理财/功能/资讯" />
        <div class="top_xiaoxizhongxin">
          <button>消息中心</button>
        </div>
        <div class="top_serve">
          <button>人工服务</button>
        </div>
      </div>
      <div class="frist_head_buttom">
        <div v-for="(item,index) in list" :key="index" :item="item" class="frist_head_buttom_d">
          <div>
            {{
            item.name}}
          </div>
        </div>
      </div>
    </div>
    <div class="frist_cont"></div>
    <div class="frist_center"></div>
    <div class="frist_news"></div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Hom",
  components: {},
  data() {
    return {
      list: [
        {
          name: "行情",
          age: 11
        },
        {
          name: "基金",
          age: 11
        },
        {
          name: "融资",
          age: 11
        },
        {
          name: "股市直播",
          age: 11
        },
        {
          name: "资讯",
          age: 11
        }
      ]
    };
  },
  methods: {
    login() {
      this.$router.push({
        name: "Login"
      });
    }
  }
};
</script>
<style lang="scss">
.frist {
  &_head {
    width: 100%;
    height: 200px;
    background-color: red;
    &_top {
      display: flex;
    }
    &_buttom {
      display: flex;
      flex-direction: row;

      &_d {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
